<script setup>
import { ref, reactive } from "vue";
import { ElAmap } from "@vuemap/vue-amap";
import dayjs from "dayjs";
import orderApi from "@/api/orderApi";
import shopperApi from "@/api/shopperApi";
import { Message } from "@arco-design/web-vue";

const loading = ref(false);
const searchModel = reactive({
  shippingDate: dayjs().format("YYYY-MM-DD"),
  shipQuery: true,
  shopperId: ''
});
const data = ref([]);
const shopperList = ref([]);
const allocation = ref({
  orderId: "",
  shippingId: "",
  orderIds: []
});
const showShopperVisible = ref(false);

const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
});

const selectedKeys = ref([]);

const zoom = ref(12);
const center = ref([118.859191, 31.908679]);
let map = null;
const init = (e) => {
  // const marker = new AMap.Marker({
  //   position: [118.859191, 31.908679],
  // });
  // e.add(marker);
  map = e;
  console.log("map init: ", map);
};

const markers = ref([])

const scroll = ref({
  x: 700,
  y: 800
});

const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 400,
  showPageSize: true,
  pageSizeOptions: [400],
  showTotal: true,
  pageChange: (current) => {
    pagination.current = current;
    search();
  },
  pageSizeChange(size) {
    pagination.pageSize = size;
    search();
  },
});

const columns = [
  {
    title: "订单时间",
    slotName: "addTimeText",
    width: 120,
  },
  {
    title: "收货信息",
    slotName: "consignee",
    width: 200,
  },
  // {
  //   title: "配送员",
  //   slotName: "shippingName",
  //   width: 80,
  // },
  // {
  //   title: "操作",
  //   slotName: "action",
  //   fixed: "right",
  //   align: "center",
  //   width: 100,
  // },
];


const search = (refreshMap) => {
  var params = {
    pageNo: pagination.current,
    pageSize: pagination.pageSize,
    queryParam: Object.assign({}, searchModel),
  };
  loading.value = true;
  orderApi.queryPage(params).then((res) => {
    data.value = res.records;
    pagination.total = res.total;
    loading.value = false;
    if (refreshMap) {
      generateMapPoint(res.records);
    }
  });
};

const queryShopperList = () => {
  shopperApi
    .queryPage({
      pageNo: 1,
      pageSize: 100,
    })
    .then((res) => {
      shopperList.value = res.records;
    });
};

const disOrder = (record) => {
  showShopperVisible.value = true;
  allocation.value.orderId = record.orderId;
  allocation.value.shippingId = "";
};

const batchDisOrder = (record) => {
  showShopperVisible.value = true;
  allocation.value.shippingId = "";
};

const allocationShooper = () => {
  if (selectedKeys.value.length > 0) {
    allocation.value.orderIds = selectedKeys.value
  }
  orderApi.allocation(allocation.value).then((res) => {
    Message.success("分配成功");
    search(false);
  });
};

const createLabel = (item, finalAddress) => {
  let content = `<div>
            <div class="title">${item.consignee}[${item.tel}]</div>
                <div style="padding:3px 0"> 
                    [${item.shippingHour}:00 - ${item.shippingHour + 1} :00] 
                    <span style="font-weight:bold;color:#4096FB;padding-left:10px;">${item.orderStatusStr
    } </span>
                </div>
                <div>${finalAddress}</div>
        </div>`;
  return content;
};

const generateMapPoint = (res) => {
  markers.value = []
  for (let i = 0; i < res.length; i++) {
    let item = res[i];
    let finalAddress = item.cityName + item.districtName + item.address;
    let content = createLabel(item, finalAddress);
    let locations = item.location.split(",");
    markers.value.push({
      id: item.orderId,
      position: new AMap.LngLat(
        locations[0],
        locations[1]
      ),
      label: {
        direction: "right",
        offset: new AMap.Pixel(10, 0),
        content: content
      }
    })
  }
};

search(true);

queryShopperList();
</script>
<template>
  <div class="main-con max-height">
    <a-row :gutter="16" class="max-height">
      <a-col :span="8" class="max-height">
        <a-card title="订单列表">
          <div style="padding-bottom: 16px">
            <a-space wrap>
              <a-date-picker style="width:120px;" v-model="searchModel.shippingDate"></a-date-picker>
              <a-select style="width:130px;" v-model="searchModel.shippingHour" allow-clear placeholder="送货时间">
                <a-option value="">全部</a-option>
                <a-option value="10">10:00~11:00</a-option>
                <a-option value="11">11:00~12:00</a-option>
                <a-option value="12">12:00~13:00</a-option>
                <a-option value="13">13:00~14:00</a-option>
                <a-option value="14">14:00~15:00</a-option>
                <a-option value="15">15:00~16:00</a-option>
                <a-option value="16">16:00~17:00</a-option>
                <a-option value="17">17:00~18:00</a-option>
                <a-option value="18">18:00~19:00</a-option>
                <a-option value="19">19:00~20:00</a-option>
              </a-select>
              <a-select v-model="searchModel.district" style="width:120px;" allow-clear placeholder="区域">
                <a-option value="">全部</a-option>
                <a-option value="320102">玄武区</a-option>
                <a-option value="320104">秦淮区</a-option>
                <a-option value="320105">建邺区</a-option>
                <a-option value="320106">鼓楼区</a-option>
                <a-option value="320111">浦口区</a-option>
                <a-option value="320113">栖霞区</a-option>
                <a-option value="320114">雨花台区</a-option>
                <a-option value="320115">江宁区</a-option>
                <a-option value="320116">六合区</a-option>
                <a-option value="320117">溧水区</a-option>
                <a-option value="320118">高淳区</a-option>
              </a-select>
              <a-select v-model="searchModel.shopperId" allow-clear placeholder="配送员">
                <a-option v-for="item in shopperList" :key="item.id" :value="item.id" :label="item.realname"></a-option>
              </a-select>
              <a-input v-model="searchModel.orderSn" placeholder="订单号" allow-clear></a-input>
              <a-button type="primary" @click="search(true)"> 查询</a-button>
              <a-button :disabled="selectedKeys.length == 0" type="primary" @click="batchDisOrder">分配</a-button>
            </a-space>
          </div>
          <a-table :columns="columns" row-key="orderId" :row-selection="rowSelection" :loading="loading" :data="data"
            @page-change="pagination.pageChange" v-model:selectedKeys="selectedKeys"
            @page-size-change="pagination.pageSizeChange" :pagination="pagination" :bordered="false" :scroll="scroll">
            <!-- <template #action="{ record }">
              <a-space>
                <a-button :disabled="record.orderStatus == 8" style="width: 60px" size="mini" type="primary"
                  @click="disOrder(record)">分配</a-button>
              </a-space>
            </template> -->
            <template #addTimeText="{ record }">
              <div class="record-item">
                <div style="font-size: 12px">
                  <span class="addtime">订单号:</span>{{ record.orderSn }}
                </div>
                <!-- <div style="font-size: 12px">
                  <span class="addtime">下单:</span>{{ record.addTimeText }}
                </div> -->
                <div style="font-weight: 600">
                  <span>收货:</span>{{ record.shippingText }}
                </div>
                <div style="color:#00AAFF;font-weight: 550;font-size:13px;">
                  <span>配送员：</span><span :style="{ color: record.shippingName ? '' : 'red' }">{{ record.shippingName ?
                    record.shippingName : '未分配'
                    }}</span>
                </div>
              </div>
            </template>
            <template #shippingName="{ record }">
              <div class="record-item">
                <div>
                  {{ record.shippingName ? record.shippingName : "—" }}
                </div>
              </div>
            </template>
            <template #consignee="{ record }">
              <div class="record-item">
                <div>
                  {{ record.consignee }} 【<span style="font-weight: 600">{{
                    record.tel
                  }}</span>】
                </div>
                <div style="font-size: 12px">
                  {{ record.address }}
                </div>
              </div>
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :span="16" class="max-height">
        <el-amap :center="center" :zoom="zoom" @init="init">
          <el-amap-marker v-for="marker in markers" :key="marker.id" :label="marker.label"
            :position="marker.position"></el-amap-marker>
        </el-amap>
      </a-col>
    </a-row>

    <a-modal v-model:visible="showShopperVisible" width="400px" title="选择配送员" @ok="allocationShooper">
      <div class="flex flex-center">
        <span style="width: 120px">选择配送员</span>
        <a-select v-model="allocation.shippingId" allow-clear placeholder="请选择配送员">
          <a-option v-for="item in shopperList" :key="item.id" :value="item.id" :label="item.realname"></a-option>
        </a-select>
      </div>
    </a-modal>
  </div>
</template>